<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>导航组件</title>
	<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
<body style="margin: 100px;">
<!-- 

	一、样式

		.nav 								//在此基础上添加其他类
		.active 							//激活状态

		1.一般样式
			1)	.nav-tabs 					//水平排列 + 100%下划线

		2.胶囊样式
			1)	.nav 
			2)	.nav-pills					//默认水平排列
			3)	.nav-stacked 				//垂直排列

	二、对齐方式
		1.两端对齐
			1)	.nav-justified 				//不存在和nav-stacked垂直排列搭配

-->
	
	<!-- 一般式 -->
	<!-- <ul class="nav nav-tabs">
		<li class="active"><a href="#">首页</a></li>
		<li><a href="#">产品</a></li>
		<li><a href="#">资讯</a></li>
		<li><a href="#">关于</a></li>
	</ul> -->

	<!-- 胶囊式 -->
	<!-- <ul class="nav nav-pills nav-stacked">
		<li class="active"><a href="#">首页</a></li>
		<li><a href="#">产品</a></li>
		<li><a href="#">资讯</a></li>
		<li><a href="#">关于</a></li>
	</ul> -->

	<!-- 两端对齐 -->
	<!-- <ul class="nav nav-tabs nav-justified">
		<li class="active"><a href="#">首页</a></li>
		<li><a href="#">产品</a></li>
		<li><a href="#">资讯</a></li>
		<li><a href="#">关于</a></li>
	</ul> -->

	<!-- 下拉菜单导航

		【注意】菜单一~四也都必须被a标签包裹 
	-->
	<!-- <ul class="nav nav-tabs">
		<li class="dropdown active">
			<a data-toggle="dropdown" href="#">
				下拉菜单
				<span class="caret"></span>
			</a>
			<ul class="dropdown-menu">
				<li><a href="#">菜单一</a></li>
				<li><a href="#">菜单二</a></li>
				<li><a href="#">菜单三</a></li>
				<li><a href="#">菜单四</a></li>
			</ul>
		</li>

		<li><a href="#">首页</a></li>
		<li><a href="#">产品</a></li>
		<li><a href="#">资讯</a></li>
		<li><a href="#">关于</a></li>
	</ul>
 -->

	<script src="bootstrap-3.3.5-dist/jquery/jquery.min.js"></script>
	<script src="bootstrap-3.3.5-dist/bootstrap/bootstrap.min.js"></script>
</body>
</html>